<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工作台账</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="./../js/index.js"></script>
    <style>
        body {
            font-size: 0.8rem;
        }

        .right-margin {
            margin-left: auto;
            text-align: right;
        }

        td:nth-child(5) {
            width: 50%;
        }

        td:nth-child(2) {
            width: 8%;
        }
		td:nth-child(4) {
            width: 5%;
        }
		td:first-child {
            width: 3%;
        }
		.my-input {
		
			//width: 200px;
			//	height: 30px;
		}
		.form-control {
		  font-size: 0.8rem;
		  padding: 0 0;
		}
		.table>:not(caption)>*>* {
			padding: .1rem .1rem;
		
		}
		
    </style>
</head>

<body>
    <div id="app" class="container-xl">
        设置监控员：
        <div class="row">
            <div class="col">
                <input type="text" class="form-control my-input" v-model="monitorAM" placeholder="监控员" :disabled="displayFlag">
            </div>
            <div class="col">
                <input type="text" class="form-control my-input" v-model="monitorPM" placeholder="监控员" :disabled="displayFlag">
            </div>
            <div class="col">
                <button type="button" class="btn btn-primary" @click="saveMonitor">保存</button>
                <button type="button" class="btn btn-danger" @click="clearMonitor">重置</button>
            </div>
        </div>



        <br>
        <div class="container-xl">
            <div style="height: 400px; overflow: auto;">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>序号</th>
							<th>时间</th>
                            <th>车牌号</th>
                            <th>速度</th>
                            <th>车辆位置</th>
                           <!-- <th>驾驶员</th>-->
                            <!--<th>监控员</th>-->
                            <th>轨迹/位置</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in trajectoryInfoArray" :key="item.id"
                            v-show="trajectoryInfoArray.length!=0">
							<td>{{item.id}}</td>
                            <td><input type="text" class="form-control" v-model="item.samplingTime"></td>
                            <td @click="copyTextlicensePlateByid(item.id)"><a href="#">{{item.licensePlate}}</a></td>
                            <td>{{item.speed}}</td>
                            <td>{{item.position}}</td>
                            <!-- <td>{{item.driver}}</td>-->
                             <!--<td>{{item.monitor}}</td>-->
                            <td>{{item.msg}}</td>
                            <td @click="updateNoDate(item.id)"><a href="#">暂无数据</a></td>
                            <td></td>
                        </tr>

                    </tbody>
                </table>
            </div>

            <div class="container-xl">
                <span id="cp2" style="font-size: 30px;color: #f20d0d;">复制成功！</span>

            </div>
            <div class="container-xl right-margin">
                <!-- <button type="button" class="btn btn-primary" @click="clearData()">清空数据</button> -->
                {{this.amCount}}/{{this.pmCount}}
                <button type="button" class="btn btn-primary" @click="sortedItems()">排序并复制</button>
				<button type="button" class="btn btn-primary" @click="reloadPage()">刷新页面</button>
                <!-- <button type="button" class="btn btn-primary" @click="copyArrayDate()">复    制</button> -->
            </div>
            <br>

            <div class="container-xl">
                <div class="row">
                    <textarea class="form-control" rows="6" v-model="inputInfo" placeholder="新增台账/车牌和司机"></textarea>
                    <!-- <textarea class="form-control" v-model="licensePlateList" rows="6" placeholder="导入车牌"
                        v-show="trajectoryInfoArray.length==0"></textarea> -->
                </div>

            </div>
        </div>
    </div>

    </div>
    <script src="./../js/vue.js"></script>
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                msg: '',
                carCodeArray: [],
                inputStr: '',
                inputInfo: '',
                copyTextarea: '',
                licensePlateList: '',
                selectKey: '',
                monitorAM: '',
                monitorPM: '',
                displayFlag: '',
                //msg:''
                carInfo: {
                    str1: '',
                    str2: '',
                    str3: '',
                    str4: ''
                },
                trajectoryInfo: {
                    id: '',
                    samplingTime: '',//抽查时间
                    licensePlate: '',//车牌
                    speed: '',//速度
                    position: '',//位置
                    driver: '',//司机
                    abnormalSituation: '无异常',//异常情况，默认无异常
                    monitor: '',//监控员
                    msg: ''
                },
                trajectoryInfoArray: [],
				amCount:0,
				pmCount:0

            },
            created() {
                // 设置定时器定时更新
                this.timer = setInterval(() => {

                    this.handlelicensePlateList()
                    this.handleNoPosition()
                    this.handleHavePosition()
					this.countAMPM()

                    this.msg = this.msg.trim();
					
					
                }, 500);

                var cp2 = document.getElementById("cp2"); //
                cp2.style.display = "none";
                let monitorName = JSON.parse(localStorage.getItem("monitorName")) || ''

                console.log(monitorName == '')
                if (monitorName == '') {
                    this.displayFlag = false
                } else {
                    this.displayFlag = true
                }


                this.monitorAM = monitorName.monitorAM
                this.monitorPM = monitorName.monitorPM
                console.log(monitorName.monitorAM)
            },

            beforeDestroy() {
                // 清除定时器以避免内存泄漏
                clearInterval(this.timer);
            },
            methods: {
			
			countAMPM(){
			this.amCount=0
			this.pmCount=0
			
			this.trajectoryInfoArray.forEach((selectKey, index, array) => {
			
						if(array[index].samplingTime !=''){
							
							if(parseInt(array[index].samplingTime.replace(/:/g, ""))<160000){
								this.amCount+=1
							}
							else{
								this.pmCount+=1
							}
							
						}
                        
                        
                   });
			
				
			},
			
			reloadPage(){
				location.reload();
			},


                sortMethod(){

                    const num = [{'tm':'13:20:03','aa':'123','bb':'13:20:03'},{'tm':'13:10:03','aa':'123','bb':'13:20:03'},{'tm':'13:50:03','aa':'123','bb':'13:20:03'}]
                    num.sort((a,b)=>{
                         
                        return parseInt(a.tm.replace(/:/g, "")) - parseInt(b.tm.replace(/:/g, ""));
                    })
                    console.log(num)

                },

                sortedItems() {

                    console.log("开始排序-----------")
                    this.trajectoryInfoArray = this.trajectoryInfoArray.sort((a, b) => { 
                       return parseInt(a.samplingTime.replace(/:/g, "")) - parseInt(b.samplingTime.replace(/:/g, ""));
                    });

                    console.log(this.trajectoryInfoArray)

                    this.trajectoryInfoArray = this.trajectoryInfoArray.map((item, index) => {

                        return item;
                    });


                   this.trajectoryInfoArray.forEach((selectKey, index, array) => {
                        if(array.length/2 > index){
                            array[index].monitor = this.monitorAM
                        }else{
                            array[index].monitor = this.monitorPM
                        }
                        
                   });
                   this.copyArrayDate()
                },

                copyTextlicensePlateByid(id) {

                    this.selectKey = id

                    try {

                        console.log(this.selectKey)
                        let found = this.trajectoryInfoArray.filter(item => item.id === this.selectKey);
                        console.dir(found[0].licensePlate)
                        const textToCopy = found[0].licensePlate;
                        navigator.clipboard.writeText(textToCopy);
                        console.log("文本已复制到剪贴板", found[0].licensePlate);


                        // this.trajectoryInfoArray.forEach((value, index, array) => {
                        //     array[index].msg = ''
                        // });
                        // found[0].msg = '已复制'
                    } catch (error) {
                        console.error("复制到剪贴板失败:", error);
                    }

                },

                copyArrayDate(){

                    let textToCopy=''

                    for (var i = 0; i < this.trajectoryInfoArray.length; i++) {

                         textToCopy = textToCopy + this.trajectoryInfoArray[i].samplingTime 
                         + '\t' + this.trajectoryInfoArray[i].licensePlate 
                         + '\t' + this.trajectoryInfoArray[i].speed 
                         + '\t' + this.trajectoryInfoArray[i].position 
                         + '\t' + this.trajectoryInfoArray[i].driver 
                         + '\t' + ""
                         + '\t' +""
                         + '\t' +""
                         + '\t' +""
                         + '\t' + '无异常' 
                         + '\t' +""
                         + '\t' + this.trajectoryInfoArray[i].monitor 
                         + '\n'
                     }
                     navigator.clipboard.writeText(textToCopy);

                },


                // copyTextlicensePlate() {
                //     try {

                //         console.log(this.selectKey)
                //         let found = this.trajectoryInfoArray.filter(item => item.id === this.selectKey);
                //         console.dir(found[0].licensePlate)
                //         const textToCopy = found[0].licensePlate;
                //         navigator.clipboard.writeText(textToCopy);
                //         console.log("文本已复制到剪贴板", found[0].licensePlate);


                //         this.trajectoryInfoArray.forEach((value, index, array) => {
                //             array[index].msg = ''
                //         });
                //         found[0].msg = '已复制'
                //     } catch (error) {
                //         console.error("复制到剪贴板失败:", error);
                //     }


                // },

                clearMonitor() {
                    localStorage.removeItem("monitorName")

                    this.monitorAM = ''
                    this.monitorPM = ''
                    this.displayFlag = false
                },

                saveMonitor() {

                    if (this.monitorAM.trim() == '' || this.monitorPM.trim() == '') {

                        return false
                    }
                    this.monitorAM = this.monitorAM.trim()
                    this.monitorPM = this.monitorPM.trim()
                    monitorName = {}
                    monitorName.monitorAM = this.monitorAM
                    monitorName.monitorPM = this.monitorPM
                    localStorage.setItem("monitorName", JSON.stringify(monitorName));
                    this.displayFlag = true
                },

                handlelicensePlateList() {

                    this.licensePlateList = this.inputInfo
                    if (this.licensePlateList == '') {

                        return false
                    }


                    if (this.licensePlateList.trim() === '') {

                        return false
                    }
                    let array = this.licensePlateList.trim().split('\n')
                    if (array[0].split('\t').length != 4) {
                        return false
                    }
                    this.inputInfo = ''

                    let id = 1

                    for (var i = 0; i < array.length; i++) {
                        let temp = array[i].split('\t')
                        //if (temp.length != 4) {
                        //    return false
                        //}
                        if (temp[0].trim().indexOf('粤') == -1) {
                            return false
                        }

                        let trajectoryInfo = {}
                        trajectoryInfo.id = id++
                        trajectoryInfo.licensePlate = temp[0]
						if(typeof temp[3] === 'undefined'){
							trajectoryInfo.driver = ''
						}else{
							trajectoryInfo.driver = temp[3]
						}
                        
                        this.trajectoryInfoArray.push(trajectoryInfo)
                    }
                    this.licensePlateList = ''
                    this.inputInfo = ''
                    console.dir(this.trajectoryInfoArray);



                },

                //插入暂无数据信息
                updateNoDate(selectKey) {

                    console.log(selectKey)
                    // let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === selectKey)[0];
                    // console.log(arrayInfo)
                    // arrayInfo.position = '暂无数据'

                    let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === selectKey)[0];
                    if (arrayInfo.position == '暂无数据') {
                        arrayInfo.position = ''
                        arrayInfo.samplingTime = '00:00:00'
                        arrayInfo.speed = ''

                    } else {
                        arrayInfo.position = '暂无数据'
                        arrayInfo.samplingTime = '00:00:00'
                        arrayInfo.speed = ''
                        console.log(this.trajectoryInfoArray[selectKey - 1])
                    }



                    this.trajectoryInfoArray = this.trajectoryInfoArray.map((item, index) => {

                        return item;
                    });


                    // this.trajectoryInfoArray.forEach((selectKey, index, array) => {
                    //         array[selectKey-1].position = '暂无数据'
                    //     });

                },

                copyText() {

                    var select = document.getElementById("msg")
                    select.select(); //选中textarea中的内容
                    try {
                        var successful = document.execCommand('copy'); //执行复制命令
                        if (successful) {
                            console.log('成功复制！');
                            if (select.value != '') {
                                var cp2 = document.getElementById("cp2"); //
                                cp2.style.display = "block";
                            }

                        } else {
                            console.log('无法复制！');
                        }
                    } catch (err) {
                        console.error('无法复制！', err);
                    }


                },


                //无轨迹的数据
                handleNoPosition() {

                    if (this.inputInfo.trim().indexOf('定位位置') != -1) {
                        return false
                    }
                    if (this.inputInfo.trim().indexOf('km/h') == -1) {
                        return false
                    }
                    if (this.inputInfo.trim() == '') {

                        return false
                    }
                    let noDatainfo = this.inputInfo.trim()
                    console.log("数组noDatainfo-------------" + noDatainfo)
                    var strArray = noDatainfo.split('\n')
                    if (strArray.length != 9 && strArray.length != 10) {
                        console.log("数组-------------" + strArray)
                        return false
                    }



                    if (strArray[1].trim().indexOf('粤') == -1) {
                        return false
                    }

                    if (strArray[2].trim().indexOf('色') == -1) {
                        return false
                    }

                    if (strArray.length == 9 && strArray[6].trim().indexOf('km/h') == -1) {
                        return false
                    }

                    if (strArray.length == 10 && strArray[7].trim().indexOf('km/h') == -1) {
                        return false
                    }
                    let licensePlate = strArray[1] //车牌
                    let position
                    let samplingTime
                    if (strArray.length == 9) {
                        position = strArray[7]
                        samplingTime = strArray[8].substring(11).trim()
                    }
                    if (strArray.length == 10) {
                        position = strArray[8]
                        samplingTime = strArray[9].substring(11).trim()
                    }
                    //位置

                    let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === this.selectKey)[0];


                    if (this.selectKey == '') {

                        arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === licensePlate)[0];

                        if (arrayInfo == '' && arrayInfo.position != '') {
                            arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === licensePlate)[1];
                        }

                        if (arrayInfo == '' && arrayInfo.position == '') {
                            arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === licensePlate)[1];
                        }
                        arrayInfo.msg = "位置"

                        if (arrayInfo == undefined) {

                            return false
                        }
                        console.log(arrayInfo)

                        arrayInfo.position = position
                        arrayInfo.speed = 0
                        arrayInfo.samplingTime = samplingTime

                    } else {
                        if (arrayInfo.licensePlate === licensePlate) {
                            arrayInfo.position = position
                            arrayInfo.speed = 0
                            arrayInfo.samplingTime = samplingTime
                        }
                    }
                    arrayInfo.msg = "位置"
                    this.selectKey = ''

                    this.inputInfo = ''


                },
                // 解析有轨迹数据
                handleHavePosition() {


                    if (this.inputInfo == '') {
                        return
                    }
                    let info = this.inputInfo.trim()

                    let strArray = info.split('\n')

                    if (strArray.length != 9) {

                        return
                    }


                    trajectoryInfo = {}
                    // 校验车牌
                    if (strArray[0].indexOf('粤') == -1) {
                        console.log("不包含车牌-------------")
                        return false
                    }

                    //校验定位时间
                    if (strArray[2].indexOf('定位时间') == -1) {
                        console.log("不包含定位时间-------------")
                        return false
                    }

                    //校验定位位置
                    if (strArray[8].indexOf('定位位置') == -1) {
                        console.log("不包含定位位置-------------")
                        return false

                    }

                    //校验行驶速度	
                    if (strArray[5].indexOf('行驶速度') == -1) {
                        console.log("不包行驶速度-------------")
                        return false

                    }

                    trajectoryInfo.licensePlate = strArray[0].trim()//车牌

                    trajectoryInfo.samplingTime = strArray[2].substring(17).trim()

                    trajectoryInfo.position = strArray[8].substring(6).trim()

                    let strPosition7 = strArray[5].indexOf('km/h')
                    trajectoryInfo.speed = Math.round(strArray[5].substring(6, strPosition7).trim())
					
                    let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === this.selectKey)[0];



                    console.log(arrayInfo)
                    if (this.selectKey == '') {
                        arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === trajectoryInfo.licensePlate)[0];
                       
                        if (arrayInfo != '' && arrayInfo.position != '') {
                           
                            arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === trajectoryInfo.licensePlate)[1];
                        }

                        if (arrayInfo != '' && arrayInfo.position == '') {
                            
                            arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === trajectoryInfo.licensePlate)[1];
                        }

                        if (typeof arrayInfo === 'undefined') {
                            

                            return false
                        }
                        console.log(arrayInfo)
                        arrayInfo.msg = "轨迹"

                        arrayInfo.position = trajectoryInfo.position
                        arrayInfo.speed = trajectoryInfo.speed
                        arrayInfo.samplingTime = trajectoryInfo.samplingTime


                    } else {
                        if (arrayInfo.licensePlate === trajectoryInfo.licensePlate) {
                            arrayInfo.position = trajectoryInfo.position
                            arrayInfo.speed = trajectoryInfo.speed
                            arrayInfo.samplingTime = trajectoryInfo.samplingTime
                        }
                    }
                    arrayInfo.msg = "轨迹"
                    this.inputInfo = ''
                    this.selectKey = ''

                    // carInfo = new Object();
                    // carInfo.str1 = str1
                    // carInfo.str2 = str2
                    // carInfo.str3 = Math.round(str3)
                    // carInfo.str4 = str4
                    // this.carCodeArray.push(carInfo)
                    // this.inputInfo = ''
                    // this.msg = ''
                    // for (var i = 0; i < this.carCodeArray.length; i++) {

                    //     this.msg = this.msg + this.carCodeArray[i].str1 + '\t' + this.carCodeArray[i].str2 + '\t' + this.carCodeArray[i].str3 + '\t' + this.carCodeArray[i].str4 + '\n'
                    // }

                }
            }

        })



    </script>
    <script src="../js/bootstrap.bundle.min.js"></script>
</body>

</html>